<template>
  <div class="top">
    <el-row class="topHeader">
      <!--logo图标-->
      <div width="200px" class="logo"><img src="../../assets/image/logo.png" alt="" /></div>
      <!--时间-->
      <el-col :span="6">
        <div class="grid-content bg-purple-light times">
          <span class="el-icon-time icon"></span>
          <span class="font">{{settime}}</span>
        </div>
      </el-col>
      <el-col :span="9">
        <div class="grid-content bg-purple kong"></div>
      </el-col>
      <!--消息-->
      <el-col :span="3" class="emails">
        <div class="grid-content bg-purple-light email">
          <span class="el-icon-message icon"></span>
          <span class="font">({{total}})公告</span>
        </div>
        <div class="email-message" v-model="notice">
          <div class="message1" v-for="item in notice" @click="open(item.id)">{{item.title}}</div>
        </div>
      </el-col>
      <!--消息内容展示-->
      <div v-model = "noticeContent">
        <el-dialog
          :title="noticeContent.title"
          :visible.sync="showContent"
          width="30%"
          center>
          <span v-html="noticeContent.contents"></span>
          <div class="time" style="text-align: right; padding-top: 10px; padding-bottom: 10px;">{{noticeContent.create_time}}</div>
        </el-dialog>
      </div>
      <!--设置-->
      <el-col :span="3" class="sets">
        <div class="grid-content bg-purple set">
          <span class="el-icon-setting icon"></span>
          <a href="javascript:;" class="font">快捷入口</a>
        </div>
        <div class="set-logout">
          <div class="set1" v-if="rule==2?false:true" @click.prevent="syllabus"><a href="#">排课表</a></div>
          <div class="set1" v-if="rule==1?false:true" @click.prevent="lesson"><a href="#">备课表</a></div>
          <div class="set1" @click.prevent="plan"><a href="#">教案库</a></div>
          <div class="set1" @click.prevent="set"><a href="#">修改密码</a></div>
          <div class="set1" @click.prevent="logout"><a href="#">安全退出</a></div>
        </div>
      </el-col>
      <!--是否全屏-->
      <el-col :span="2">
        <div class="grid-content bg-purple-light screen" @click.prevent="handleFullScreen">
          <el-tooltip effect="dark" :content="fullscreen ? `取消全屏`:`全屏`" placement="bottom">
            <span class="el-icon-rank icon">
              <a href="javascript:;" class="font" v-if="fullscreen">取消全屏</a>
              <a href="javascript:;" class="font" v-else>全屏</a>
            </span>
            <span class="font">开启全屏</span>
          </el-tooltip>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        fullscreen:false,
        settime:null,
        notice:[],
        total:'',
        noticeContent:[],
        showContent:false,//通知
        rule:'',
        third:'third'
      }
    },
    mounted(){
      this.loptime();
    },
    methods:{
      //全屏功能
      handleFullScreen(){
        let element = document.documentElement;
        if (this.fullscreen) {
          if (document.exitFullscreen) {
            document.exitFullscreen();
          } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
          } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
          } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
          }
        } else {
          if (element.requestFullscreen) {
            element.requestFullscreen();
          } else if (element.webkitRequestFullScreen) {
            element.webkitRequestFullScreen();
          } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
          } else if (element.msRequestFullscreen) {
            // IE11
            element.msRequestFullscreen();
          }
        }
        this.fullscreen = !this.fullscreen;
      },
      //时间
      loptime(){
        var _this=this;
        setInterval(function(){
          _this.formatDate()
        },1000);
      },
      formatDate() {
        var date = new Date(); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear()+'';
        var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1)+'';
        var D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' ';
        var w = date.getDay()+ ' ';
        var h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':';
        var m = date.getMinutes() < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':';
        var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
        if(w ==1){
          w = '一'
        }else if(w == 2){
          w = '二'
        }else if(w == 3){
          w = '三'
        }else if(w == 4){
          w = '四'
        }else if(w == 5){
          w = '五'
        }else if(w == 6){
          w = '六'
        }else if(w == 0){
          w = '日'
        }
        this.settime=Y +'年'+ M +'月'+ D +'日'+' '+'星期'+w+' '+ h + m + s;
        return Y +'年'+ M +'月'+ D +'日'+' '+'星期'+w+' '+ h + m + s;
      },
      logout(){
        this.$confirm('确定要退出吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(res => {
          this.$message({
            type: 'success',
            message: '退出成功'
          });
          sessionStorage.removeItem('token')
          this.$router.push({name:'login'})
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消退出'
          });
        });
      },
      //教案库
      plan(){
        this.$router.push({name:'resources'})
      },
      //备课
      lesson(){
        this.$router.push({name:'lesson'})
      },
      //排课
      syllabus(){
        this.$router.push({name:'syllabus'})
      },
      set(){
        this.$router.push(
          {
            name:'set',
            path:'/set',
            query:{
              tab:this.third
            }
          }
        )
      },

      //公告
      getNotice(){
        this.$http.post('/api/first/notice')
          .then(res=>{
            this.total = res.data.count
            this.notice = res.data.data
          })
      },
      open(id) {
        this.$http.post('/api/first/firstSchoolIsRead',{
          id:id
        }).then(res=>{
          this.noticeContent = res.data.data
        })
        this.showContent = true
      },
    },
    created(){
      this.getNotice()
      //获取到身份
      this.rule = localStorage.getItem('rule')
    },
  }
</script>

<style>
  .el-header {
    padding: 0 !important;
    line-height: 20px;
  }
</style>
<style lang="less" scoped>

  .top {
    width: 100%;
    padding:0;
    .topHeader {
      padding-left: 200px;
      position: relative;
      .logo {
        width: 200px;
        height: 45px;
        position: absolute;
        top: 0;
        left: 0;
        background: #0a9d3b;
        padding-top: 15px;
      }
      .times {
        height: 60px;
        line-height: 60px;
        .icon {
          font-size: 20px;
          line-height: 60px;
          display: inline-block;
          vertical-align: middle;
          padding-right:5px;
        }
        .font {
          font-size: 14px;
          color: #666;
          vertical-align: middle;
        }
      }
      .kong {
        height: 60px;
      }
      .emails {
        height: 60px;
        line-height: 60px;
        position: relative;
        z-index: 2;
        cursor: pointer;
        &:hover{
          background: #eee;
          cursor: pointer;
          .email-message {
            display: block;
          }
        }
        .email {
          height: 60px;
        }
        .email-message {
          width: 100%;
          background-color: #fff;
          float: left;
          display: none;
          position: absolute;
          top: 60px;
          right:0px;
          .message1 {
            height: 40px;
            line-height: 40px;
            font-size: 12px;
            border-bottom: 1px solid #ccc;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            /*line-height: 25px;*/
            /*max-height: 25px;*/
            -webkit-line-clamp: 1;
            /*! autoprefixer: off */
            -webkit-box-orient: vertical;
            /* autoprefixer: on */
            &:hover {
              background-color: #eee;
            }
          }
        }
      }
      .sets {
        height: 60px;
        line-height: 60px;
        cursor: pointer;
        position: relative;
        z-index: 2;
        &:hover {
          background: #eee;
          cursor: pointer;
          .set-logout {
            display: block;
          }
        }
        .set-logout{
          width: 100%;
          background-color: #fff;
          float: left;
          display: none;
          position: absolute;
          top: 60px;
          right:0px;
          z-index: 300;
        }
        .set1 {
          height: 40px;
          line-height: 40px;
          font-size: 12px;
          border-bottom: 1px solid #ccc;
          &:hover {
            background-color: #eee;
          }
        }
      }
      .screen {
        height: 60px;
        line-height: 60px;
      }
    }
  }
</style>
